<template>
	<view class="page-body" :class="[app.setCStyle(from)]">
		<u-form :model="model" ref="uForm" :errorType="errorType" class="edit-from">
			<view class="list-cell b-b headimgurl" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">头像</text>
				<view class="fr fs32 relative">
					<view style="border: none;width: 150rpx !important;">
						<button open-type="chooseAvatar" hover-class="none"
							style="border: none;background-color: transparent;width: 140rpx;height: 100rpx;"
							@chooseavatar="onChooseAvatars" @click="onChooseAvatars">
							<u-image width="100rpx" height="100rpx" ref="uImage" mode="aspectFill"
								:src="model.headimgurl_show" shape="circle">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</button>
					 
								
					</view>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="mt20">
				<view class="list-cell b-b " hover-class="cell-hover" :hover-stay-time="50">
					<text class="cell-tit">真实姓名</text>
					<u-form-item prop="real_name">
						<u-input :border="border" :clearable="false" class="text-right" v-model="model.real_name"
							type="text"></u-input>
					</u-form-item>
					<view class="fr fs32">
						<u-icon name="arrow-right" size="20"></u-icon>

					</view>
				</view>
				<view class="list-cell b-b " hover-class="cell-hover" :hover-stay-time="50">
					<text class="cell-tit">昵称</text>
					<u-form-item prop="nick_name">
						<input style="margin-top: 20rpx;" :border="border" :clearable="false" class="text-right"
							v-model="model.nick_name" type="nickname"></input>
					</u-form-item>
					<view class="fr fs32">
						<u-icon name="arrow-right ml20" size="20"></u-icon>

					</view>
				</view>
				<view class="list-cell b-b " hover-class="cell-hover" :hover-stay-time="50" @click="sexListShow=true">
					<text class="cell-tit">性别</text>
					<view class="fr  fs30">{{model.sex_text}}
						<u-icon name="arrow-right ml20" size="20"></u-icon>
					</view>
				</view>
				<u-action-sheet :list="sexList" :cancel-btn="false" @click="selectSex" v-model="sexListShow">
				</u-action-sheet>
				<view class="list-cell b-b " hover-class="cell-hover" :hover-stay-time="50" @click="showRegion=true">
					<text class="cell-tit">所在区域</text>
					<view class="fr  fs30">
						{{defaultRegionText}}
						<u-icon name="arrow-right ml20" size="20"></u-icon>
					</view>
				</view>
				<u-picker mode="region" v-model="showRegion" :area-code="model.region_code" @confirm="confirmRegion">
				</u-picker>
			</view>
			<view class="pbox mt40">
				<button size="default" :loading="isLoading" shape="circle" type="warning" class="fs32 primarybtn"
					@click="submit">确认修改</button>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: '',
				isLoading: false,
				model: {
					headimgurl: '',
					edit_headimgurl: 0,
					headimgurl_show: '',
					nick_name: '',
					real_name: '',
					sex: 0,
					sex_text: '不公开',
					region_code: []
				},
				sexListShow: false,
				sexList: [{
						text: '不公开',
						id: 0
					},
					{
						text: '男',
						id: 1
					},
					{
						text: '女',
						id: 2
					}
				],
				defaultRegionText: '',
				showRegion: false,
				rules: {
					real_name: [{
							required: true,
							message: '请输入真实姓名',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 15,
							message: '姓名长度在2到15个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				},
				nick_name: [{
					required: true,
					message: '请输入昵称',
					trigger: 'blur',
				}],
				border: false,
				errorType: ['toast'],
			};
		},
		//裁剪回调
		created() {
			uni.$on('uAvatarCropper', path => {
				this.$refs.uImage.isError = false; //图片加载失败时，裁剪回调重置
				this.model.headimgurl = path;
				this.model.edit_headimgurl = 1;
				let that = this;
				//#ifdef APP-PLUS
				that.app.appReadFileToBase64(path, res => {
					that.model.headimgurl = res
				});
				//#endif
				//#ifdef MP-WEIXIN
				that.app.wxGetFileSystemManager(path, res => {
					that.model.headimgurl = res
				});
				//#endif

			})
		},
		onLoad(options) {
			this.getUserInfo();
			this.from = options.from;
			console.log('？？？')

		},
		computed: {},
		methods: {
			
			onChooseAvatars(type) {
				var that = this;
				
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						if (res.tempFiles[0].size > that.upsize) {
							that.$u.toast('图片不能大于5MB.');
							return false;
						}
						uni.uploadFile({
							url: that.config.upImageUrl,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (resb) => {
								resb = JSON.parse(resb.data);
								console.log(resb);
								if (resb.code < 1) {
									that.$u.toast(resb.msg);
									return false;
								}
								that.model.edit_headimgurl = 1;
								that.model.headimgurl_show = that.config.baseUrl + resb.file;
								that.model.headimgurl = resb.file;
								that.$forceUpdate();
							}
						});
			
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl)
				var that = this;
				that.model.headimgurl_show = avatarUrl

				this.model.edit_headimgurl = 1;
				uni.uploadFile({
					//url: 'https://wwwqxfl.com/shangchuan/',
					url: that.config.upImageUrl,
					name: 'file',
					filePath: avatarUrl,
					success: (res) => {
						console.log(res.data)
						var obj = JSON.parse((res.data));
						console.log(obj.data)
						that.model.headimgurl_show = that.config.baseUrl + obj.data;
						that.model.headimgurl = obj.data;
						that.$forceUpdate();
					}
				})
			},
			chooseAvatar() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			getUserInfo() {
				//获取登录会员信息
				this.$u.api.getUserInfo().then(res => {
					let userInfo = res.data;
					this.model.headimgurl_show = this.config.baseUrl + userInfo.headimgurl;
					this.model.headimgurl = userInfo.headimgurl;
					this.model.nick_name = userInfo.nick_name;
					this.model.real_name = userInfo.real_name;
					this.model.sex = userInfo.sex;
					this.model.sex_text = this.sexList[userInfo.sex].text;
					this.model.region_code = [userInfo.province, userInfo.city, userInfo.district]
					this.defaultRegionText = userInfo.region_text;
				});
			},
			// 预览图片
			preAvatar() {
				wx.previewImage({
					current: '', // 当前显示图片的 http 链接
					urls: [this.model.headimgurl] // 需要预览的图片 http 链接列表
				})
			},
			selectSex(index) {
				var sexObj = this.sexList[index];
				this.model.sex = sexObj.id;
				this.model.sex_text = sexObj.text;
			},
			confirmRegion(e) {
				//this.defaultRegion = [e.province.label,  e.city.label, e.area.label];
				this.defaultRegionText = e.province.label + ',' + e.city.label + ',' + e.area.label;
				this.model.region_code = [e.province.value, e.city.value, e.area.value];
			},
			submit() {
				var that = this;
				this.$refs.uForm.setRules(this.rules);
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					}
					if (this.isLoading == true) {
						return false;
					}
					this.isLoading = true;
					this.$u.post('member/api.users/editInfo', this.model).then(res => {
						this.isLoading = false;
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function(res) {
								that.model.edit_headimgurl = 0;
								if (res.confirm) {
									that.getUserInfo();
								}
							}
						});
					}).catch(res => {
						this.isLoading = false;
					})
				});
			},

		}
	}
</script>

<style lang='scss'>
	button::after {
		border: none;
	}
</style>
